<template>
  <div class="footer-options">
    <div class="options-header">
      <div class="tabs">
        <div class="tab-item active">{{ title }}</div>
      </div>
      <div class="options-content">
        <el-form :model="value" size="mini">
          <el-form-item label="">
            <el-table :data="value.navItems" border>
              <el-table-column label="选中" align="center">
                <template slot-scope="{row}">
                  <imageUpload v-model="row.icon.active" :limit="1" value-type="json" />
                </template>
              </el-table-column>
              <el-table-column label="未选中" align="center">
                <template slot-scope="{row}">
                  <imageUpload v-model="row.icon.default" :limit="1" value-type="json" />
                </template>
              </el-table-column>
              <el-table-column label="文字" align="center">
                <template slot-scope="{row}">
                  <el-input v-model="row.text" />
                </template>
              </el-table-column>
              <el-table-column label="排序" align="center" width="60">
                <template slot-scope="{row,$index}">
                  <div v-if="row.sortable" class="tool-kit">
                    <i v-if="$index>1" class="el-icon-top" @click="onMove($index,-1)" />
                    <i v-if="$index!==(value.navItems.length-1)" class="el-icon-bottom" @click="onMove($index,1)" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" width="60">
                <template slot="header">
                  <el-button type="text" size="mini" @click="onAdd">添加</el-button>
                </template>
                <template slot-scope="{row,$index}">
                  <i v-if="row.removable" class="el-icon-delete-solid" @click="onRemove($index)" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="文字颜色" class="font-color-picker">
            <span>
              默认
            </span>
            <el-color-picker v-model="value.fontColor.default" />
            <span>
              选中
            </span>
            <el-color-picker v-model="value.fontColor.active" />
          </el-form-item>
          <el-form-item label="背景颜色">
            <el-color-picker v-model="value.bgColor" />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { createUniqueString } from '@/utils'

export default {
  name: 'FooterOptions',
  props: {
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default: null
    }
  },
  methods: {
    onAdd() {
      if (this.value.navItems.length < 5) {
        this.value.navItems.push({
          icon: {
            default: '',
            active: ''
          },
          text: '',
          sortable: true,
          removable: true,
          _uid: createUniqueString()
        })
      }
    },
    onMove(i, d) {
      const list = [...this.value.navItems]
      const current = list[i]
      list[i] = list[i + d]
      list[i + d] = current
      this.value.navItems = [].concat(list)
    },
    onRemove(i) {
      this.value.navItems.splice(i, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-upload--picture-card{
  width: auto;
  height: auto;
  line-height: 1;
}
::v-deep .el-upload__tip{
  display: none;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item{
  width: auto;
  height: auto;
  line-height: 1;
  margin: 0;
}
[class^=el-icon-]{
  cursor: pointer;
}
[class^=el-icon-]+[class^=el-icon-]{
  margin-left: 10px;
}
.font-color-picker{
  span{
    margin-right: 5px;
    vertical-align: top;
  }
  .el-color-picker+span{
    margin-left: 15px;
  }
}
</style>
